<template>
	<view class="search-station-list-page">
		<view class="station-card" v-for="(stationItem,stationIndex) in stationList" :key="stationIndex">
			<view class="station-card-head station-card-head-border-bottom"
				@click.stop="changeStationState(stationIndex)">
				<view class="left">
					<image src="/static/images/bus/station_car.png"></image>
					<text class="station-name text-ellipsis">{{stationItem.stationName}}</text>
					<!-- <text class="home-font-sub font-color-weak-28">{{stationItem.distance.toFixed(0)}}m</text> -->
				</view>
				<view class="right">
					<text class="home-font-sub">{{stationItem.isOpen ? '收起' : '展开'}}</text>
					<image
						:src="stationItem.isOpen ? '/static/images/bus/station_open.png' : '/static/images/bus/station_close.png'">
					</image>
				</view>
			</view>
				
			<view class="station-card-list" v-show="stationItem.isOpen">
				<block v-for="(lineItem,lineIndex) in stationItem.nearbySegment" :key="lineIndex">
					<view class="station-card-list-item" v-if="stationIndex == 0 && lineIndex < 2"
						@click="goLinesPage(lineItem,stationItem)">
						<view class="line-name">
							<view class="left">{{lineItem.lineName}}</view>
							<view class="right">
								<image src="/static/images/bus/an_realtime.gif"></image>
								<text v-if="lineItem.isRun==null" style="color: rgba(0, 0, 0, 0.38);">{{lineItem|formatDisplay}}</text>
								<text v-else style="color: #FF9C15;">{{lineItem|formatDisplay}}</text>
							</view>
						</view>
						<view class="line-direction">{{lineItem.segmentName}}</view>
					</view>
					
					<view class="station-card-list-item"
						v-else-if="openType == false || stationIndex !== 0"
						@click="goLinesPage(lineItem,stationItem)">
						<view class="line-name">
							<view class="left">{{lineItem.lineName}}</view>
							<view class="right">
								<image src="/static/images/bus/an_realtime.gif"></image>
								<text v-if="lineItem.isRun==null" style="color: rgba(0, 0, 0, 0.38);">{{lineItem|formatDisplay}}</text>
								<text v-else  style="color: #FF9C15;">{{lineItem|formatDisplay}}</text>
							</view>
						</view>
						<view class="line-direction">{{lineItem.segmentName}}</view>
					</view>
				</block>
				<!-- 查看全部 -->
				<view class="see-all" v-if="stationIndex == 0 && stationItem.nearbySegment.length > 2"
					@click="setOpenType">
					<text class="font-color-weak-28">{{openType?'查看全部':'收起'}}</text>
				</view>
			</view>
			<!-- 站点下的线路名称列表 -->
			<view class="station-card-tag-list" v-show="!stationItem.isOpen">
				<view style="display: inline-block;"
					v-for="(lineItem,lineIndex) in stationItem.nearbySegment" :key="lineIndex">
					<view class="tag-item" v-if="lineIndex < 10">
						{{lineItem.lineName}}
					</view>
					<image class="more-img" v-if="lineIndex == 10" src="/static/images/bus/more.png">
					</image>
				</view>
			</view>
		</view>
		<!-- 遮罩 -->
		<view class="mask" v-if="isShowMask"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityName:'贵阳市',
				stationList:[],
				openType: true,//最近站点的查看更多
				stationOpenIndex: 0,//查看的是哪一个站点线路列表，默认最近站点
				setInterTime: null ,//定时器对象
				isShowMask: false//是否是接口请求中
			}
		},
		onLoad(option) {
			// console.log(JSON.stringify(option));
			// var option = {"stationName":"喷水池"};
			this.stationName = decodeURIComponent(option.stationName);
			uni.setNavigationBarTitle({
				title:this.stationName
			})
			// 城市名称
			if(!uni.getStorageSync('cityData')){
				this.$Common.getCity();
			}
			this.cityName = uni.getStorageSync('cityData').city;
			this.getStationNameLine(true,0);
		},
		onShow() {
			let that = this;
			// 重新获取城市
			this.cityName = uni.getStorageSync('cityData').city;
			// 刷新实时数据
			clearInterval(this.setInterTime);
			this.setInterTime = setInterval(() => {
				that.getNearStationBusTime(false,0);
			}, 15000)
		},
		onPullDownRefresh() {
			let that = this;
			if(!that.isShowMask){
				this.stationOpenIndex = 0;
				this.getStationNameLine(false,1);
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1500)
			}else{
				uni.stopPullDownRefresh();
			}
		},
		onUnload() {
			clearInterval(this.setInterTime);
		},
		onHide() {
			clearInterval(this.setInterTime);
		},
		filters:{
			formatDisplay(val){
				if(val.isRun==null){
					return '正在查询';
				}
				if(!val.isRun){
					return '不在运营时间';
				}
				if(val.targetStationCount==null){
					return '等待发车';
				}
				if(val.targetStationCount==0){
					return '已到站';
				}
				if(val.targetStationDistance<400 && val.targetStationCount>0){
					return '即将到站';
				}
				
				let time = val.targetStationDistance/val.speed;
				
				return `${(time/60).toFixed(0)}分钟 • ${val.targetStationCount}站`;
			}
		},
		methods: {
			// 获取站点下所有公交
			getStationNameLine(isShowLoading,type) {
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				if(isShowLoading !== true){
					isShowLoading = false;
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let getData = {
						stationName: that.stationName,
						city: that.cityName
					};
				if(type == 1){
					that.isShowMask = true;
				}
					// console.log(JSON.stringify(getData));
				this.$request({
					url: this.$API.getStationNameLine,
					method: 'GET',
					data: getData,
					header: header,
					timeout: 20000,
					isShowLoading: isShowLoading,
					lodingText: '加载中...'
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						this.stationList = res.data;
						this.stationList.sort(function(a, b) { //按距离近到远排序
							return a.distance - b.distance
						});
						// this.stationList.forEach((val, index) => {
						// 	index == that.stationOpenIndex ? that.$set(val, 'isOpen', true) : that.$set(val, 'isOpen', false);
						// })
						this.stationList.forEach((val, index) => {
							that.$set(val, 'isOpen', false);
						})
						if(type == 1){
							that.getNearStationBusTime(true,1);
						}else{
							that.getNearStationBusTime(false,0);
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			//到站时间，index站点的数组索引
			getNearStationBusTime(isShowLoading,type){ 
				let that = this;
				if(isShowLoading !== true){
					isShowLoading = false;
				}
				var arr = [];
				var nearbySegment = this.stationList[that.stationOpenIndex].nearbySegment;
				for (var i = 0; i < nearbySegment.length; i++) {
					arr.push(nearbySegment[i].stationId)
				}
				if (!this.$Common.isGetToken()) {
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let getData = {
					stationIds: arr.join(','), //站点id
					stationName: that.stationList[that.stationOpenIndex].stationName //站点名
				};
				if(type == 1){
					that.isShowMask = true;
				}
				// console.log(JSON.stringify(getData));
				this.$request({
					url: this.$API.getNearStationBusTime,
					data: getData,
					header: header,
					timeout: 20000,
					isShowLoading: isShowLoading,
					lodingText: '获取实时数据...'
				}).then(res => {
					// console.log("hhhh:"+JSON.stringify(res));
					that.isShowMask = false;
					if (res.code == 200) {
						// this.stationList.forEach((val, index) => {
						// 	index == that.stationOpenIndex ? that.$set(val, 'isOpen', true) : that.$set(val, 'isOpen', false);
						// })
						that.stationList[that.stationOpenIndex].isOpen = true;
						that.stationList[that.stationOpenIndex].nearbySegment = res.data;
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			//展开收起
			changeStationState(stationIndex) {
				if(this.isShowMask == false){
					if(this.stationOpenIndex !== stationIndex){
						for (var i = 0; i < this.stationList.length; i++) {
							if (stationIndex == i) {
								this.stationList[stationIndex].isOpen = !this.stationList[stationIndex].isOpen
							} else {
								this.stationList[i].isOpen = false;
							}
						}
						this.stationOpenIndex = stationIndex;
						this.getNearStationBusTime(true,1);
					}else{
						this.stationList[stationIndex].isOpen = !this.stationList[stationIndex].isOpen
					}
					
				}
			},
			// 点击查看更多
			setOpenType() {
				this.openType = !this.openType;
			},
			//跳转到详情页
			goLinesPage(lineItem, stationItem) {
				clearInterval(this.setInterTime);
				uni.navigateTo({
					url: `../real_bus/xr_line_detail_1?source=1&stationId=${stationItem.stationId}&stationName=${stationItem.stationName}&lineId=${lineItem.lineId}&drivingDirection=${lineItem.drivingDirection}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-station-list-page{
		
	}
	// 站点列表
	.staion-box{
		min-height: 420rpx;
	}
	.station-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 40rpx;
		padding: 0 40rpx;
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(154, 154, 154, 0.75);
	
		.station-card-head {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
	
			.left {
				display: flex;
				align-items: center;
	
				.station-name {
					font-weight: bold;
					// font-size: 30rpx;
					color: rgba(0, 0, 0, 0.87);
				}
	
				image {
					height: 50rpx;
					width: 50rpx;
					margin-right: 6rpx;
				}
	
				.home-font-sub {
					margin-top: 8rpx;
					margin-left: 10rpx;
				}
			}
	
			.right {
				display: flex;
				align-items: center;
	
				image {
					height: 48rpx;
					width: 48rpx;
				}
			}
		}
	
		.station-card-head-border-bottom {
			border-bottom: 1px solid rgba(224, 224, 224, 0.4);
		}
	
		// 列表
		.station-card-list {
			margin-top: 50rpx;
	
			.station-card-list-item {
				padding-bottom: 60rpx;
	
				.line-name {
					display: flex;
					justify-content: space-between;
	
					.left {
						font-weight: bold;
						color: rgba(0, 0, 0, 0.87);
					}
	
					.right {
						font-size: 32rpx;
						// color: #8f8f8f; //另一种字体颜色
						color: #26a2ff;
						font-weight: bold;
	
						image {
							margin-right: 10rpx;
							width: 12rpx;
							height: 24rpx;
						}
					}
				}
	
				.line-direction {
					color: rgba(0, 0, 0, 0.38);
					margin-top: 12rpx;
					font-size: 28rpx;
	
					text {
						margin-left: 14rpx;
					}
				}
	
			}
	
	
		}
	
		.see-all {
			text-align: center;
			padding: 20rpx;
			border-top: 1px solid rgba(224, 224, 224, 0.4);
		}
	
		// tag
		.station-card-tag-list {
			padding-bottom: 30rpx;
	
			.tag-item {
				display: inline-block;
				background-color: #e9f6ff;
				color: #26a2ff;
				border-radius: 8rpx;
				margin: 8rpx;
				padding: 4rpx 10rpx;
				border: 0.5px solid rgba(0, 0, 0, 0.1);
			}
	
			.more-img {
				height: 4rpx;
				width: 22rpx;
				margin-left: 10rpx;
			}
		}
	
	}
	.mask{
		z-index: 99;
	}
</style>
